<!-- detail.html - The product details view template. It has 3 divs (images, purchasing, details) contained within 1 div (productdetail)  -->

[<tag id="includeinheader" type="meta" value="detailpageheader.html" />]<!-- Injects a template with dynamic data into page head section -->

<div class="productdetail" itemscope itemtype="http://schema.org/Product">

	[<tag type="if" function="imgexists" testvalue="1" display="{ON}" />]
	<div class="images">
	<div class="image">
	
	  <!-- Add to favorites buttons -->
  <div class="favorite-flag" [<tag type="if" function="settings" key="enablefavorites" testvalue="True" displayelse="style='display:none;'" />]>
	<a class="wishlistadd" listname="nbsfavorites0" itemid="[<tag type="valueof" databind="ItemId" />]">[<tag type="htmlof" resourcekey="ProductView.wishlistaddicon-lg" />]</a>
  	<a class="wishlistremove" listname="nbsfavorites0" itemid="[<tag type="valueof" databind="ItemId" />]" style="display:none;">[<tag type="htmlof" resourcekey="ProductView.wishlistremoveicon-lg" />]</a>
  </div>

  <a href="[<tag type='valueof' xpath='genxml/imgs/genxml[[1]]/hidden/imageurl' />]" data-imagelightbox="nbb"><img src="[<tag type='thumbnail' w='{Settings:classicimagewidth}' h='{Settings:classicimageheight}' image='1' />]" alt="[<tag type='productimgdesc' index='1'  />]" title="[<tag type='productimgdesc' index='1'  />]" /></a>
  	[<tag type="if" function="isonsale" display="{ON}" displayelse="{OFF}" />]<!-- Sale flag -->
		<div class="onsaleflag">[<tag type="label" resourcekey="ProductView.onsaleflag" />]</div>
		[<tag type="endif" />]
		[<tag type="if" function="isinstock" testvalue="0" display="{OFF}"/>]<!-- Out of stock flag -->
		<div class="outofstockflag">[<tag type="label" resourcekey="ProductView.outofstockflag" />]</div>
		[<tag type="endif" />]
  </div>
  
  [<tag type="xslinject" template="detailimages.xsl" argslist="classicgallerywidth,classicgalleryheight"/>]

</div>
	[<tag type="endif" />]

<div class="purchasing">

		<h1 itemprop="name">[<tag type="productname" />]</h1>

		<div class="price">

    [<tag type="if" function="isonsale" display="{ON}" />]
    [<tag type="valueof" resourcekey="ProductView.onsale" />] : <!-- Sale Label -->
		[<tag type="if" function="hasmodelsoroptions" display="{ON}" />][<tag type="valueof" resourcekey="ProductView.from" />] [<tag type="endif" />]<span class="old">[<tag type="price" />]</span><!-- From Label -->
		<span class="sale">[<tag type="bestprice" />]</span><!-- Always show best price -->
    [<tag type="endif" />]

    [<tag type="if" function="isonsale" display="{OFF}" />]
		[<tag type="if" function="hasmodelsoroptions" display="{ON}" />][<tag type="valueof" resourcekey="ProductView.from" />] [<tag type="endif" />][<tag type="price" />]<!-- From Label -->
    [<tag type="endif" />]

    </div>

		[<tag type="if" xpath="genxml/lang/genxml/textbox/txtsummary" testvalue="" display="{OFF}" displayelse="{ON}" />]
		<div itemprop="description" class="summary">[<tag type="breakof" xpath="genxml/lang/genxml/textbox/txtsummary" />]</div>
		[<tag type="endif"  />]

		[<tag type="if" function="modelexists" testvalue="2" display="{ON}" displayelse="{OFF}" />]
		<div class="models">
      [<tag type="modelsradio" template="{name} ({bestprice})" RepeatDirection="Vertical" RepeatColumns="1" SelectedIndex="" cssclass="modelsradio" />]
    </div>
		[<tag type="endif"  />]

		[<tag type="if" function="optionexists" testvalue="1" display="{ON}" displayelse="{OFF}" />]
    <div class="options">
    [<tag type="if" function="optionexists" testvalue="1" display="{ON}" displayelse="{OFF}" />]
		<div class="option option1"><span class="optionname optionname1">[<tag type="productoptionname" index="1" />]</span><span class="optionvalue optionvalue1">[<tag type="productoption" index="1" />]</span></div>
		[<tag type="endif"  />]
		[<tag type="if" function="optionexists" testvalue="2" display="{ON}" displayelse="{OFF}" />]
		<div class="option option2"><span class="optionname optionname2">[<tag type="productoptionname" index="2" />]</span><span class="optionvalue optionvalue2">[<tag type="productoption" index="2" />]</span></div>
		[<tag type="endif"  />]
		[<tag type="if" function="optionexists" testvalue="3" display="{ON}" displayelse="{OFF}" />]
		<div class="option option3"><span class="optionname optionname3">[<tag type="productoptionname" index="3" />]</span><span class="optionvalue optionvalue3">[<tag type="productoption" index="3" />]</span></div>
		[<tag type="endif"  />]
		[<tag type="if" function="optionexists" testvalue="4" display="{ON}" displayelse="{OFF}" />]
		<div class="option option4"><span class="optionname optionname4">[<tag type="productoptionname" index="4" />]</span><span class="optionvalue optionvalue4">[<tag type="productoption" index="4" />]</span></div>
		[<tag type="endif"  />]
		</div>
    [<tag type="endif"  />]
	
    [<tag type="if" function="settings" key="cataloguemode" testvalue="True" display="{OFF}" />]<!-- Catalogue mode -->
    <div class="buy">

    [<tag type="if" function="isinstock" testvalue="0" display="{ON}"/>]
    <div class="quantityoptions">
      <a class="qtyminus" href="javascript:void(0)">-</a>
      [<tag type="addqty" text="1" width="21" cssclass="quantity" />]
      <a class="qtyplus" href="javascript:void(0)">+</a>
    </div>
    [<tag type="linkbutton" resourcekey="ProductView.addtobasket" cssclass="classicbutton" commandname="addtobasket" commandargument="ItemID" />]
    [<tag type="endif"  />]

		[<tag type="if" function="isinstock" testvalue="0" display="{OFF}"/>]
		<span class="outofstock">[<tag type="label" resourcekey="ProductView.outofstock" />]</span>
		[<tag type="endif"  />]

		<span class="return">[<tag type="returnlink" resourcekey="ProductView.return" cssclass="classicbutton" />]</span>

		</div>
    [<tag type="endif"  />]<!-- End Catalogue mode -->

</div>

<!-- Details -->
<div class="details">

        <ul class="nav-tabs">
            [<tag type="if" xpath="genxml/lang/genxml/edt/description" testvalue="" display="{OFF}" />]
            <li class="tab-active"><a href="#tab-1">[<tag type="valueof" resourcekey="ProductView.description" />]</a></li><!-- Product description -->
            [<tag type="endif" />]
            [<tag type="if" function="optionexists" testvalue="1" display="{ON}" />]
            <li><a href="#tab-2">[<tag type="valueof" resourcekey="ProductView.models" />]</a></li><!-- Show Options table -->
            [<tag type="endif" />]
            [<tag type="if" function="hasdocuments" display="{ON}" />]
            <li><a href="#tab-3">[<tag type="valueof" resourcekey="ProductView.documentation" />]</a></li><!-- Document downloads -->
            [<tag type="endif" />]
        </ul>
        <!--<div class="sharingwidget"><div class="share">[<tag type="valueof" resourcekey="ProductView.share" />] :</div><div class="addthis_sharing_toolbox"></div></div> Sharing widget -->
        <div class="sharingwidget"><div class="share">[<tag type="valueof" resourcekey="ProductView.share" />] :</div><div class="addthis_fake"><img src="/DesktopModules/NBright/NBrightBuy/Themes/Classic/img/addthis.png" /></div></div><!-- Only for Demo Website -->

        [<tag type="if" xpath="genxml/lang/genxml/edt/description" testvalue="" display="{OFF}" displayelse="{ON}" />]<!-- Product description -->
        <div id="tab-1" class="tab-content tab-active">
          <h3>[<tag type="valueof" resourcekey="ProductView.description" />]</h3>
          [<tag type="description" />]
        </div>
        [<tag type="endif" />]

        [<tag type="if" function="optionexists" testvalue="1" display="{ON}" />]<!-- Show Options table -->
        <div id="tab-2" class="tab-content tab-hide">
          <h3>[<tag type="valueof" resourcekey="ProductView.models" />]</h3>
          <div class="models">
          <table>
			    <tbody>
				  [<tag type="modelslist" template="modellist.html" />]
			    </tbody>
		      </table>
          </div>
        </div>
        [<tag type="endif"  />]

        [<tag type="if" function="hasdocuments" display="{ON}" />]
        <div id="tab-3" class="tab-content tab-hide">
        <h3>[<tag type="valueof" resourcekey="ProductView.documentation" />]</h3>
            <ul class="documents">
	            [<tag type="if" xpath="genxml/docs/genxml[[1]]/textbox/txtfilename" testvalue="" display="{OFF}"  />]
	            <li><i class='fa fa-file-text fa-2x'></i>[<tag type="label" resourcekey="ProductView.filebullets" />]<span class="documentname">[<tag type="productdoctitle" index="1" />]</span><span class="documentdescription">[<tag type="productdocdesc" index="1" />]</span>
	            [<tag cssclass="documentlink classicbutton" resourcekey="ProductView.download" type="productdoclink" index="1" />]
	            </li>
	            [<tag type="endif" />]

	            [<tag type="if" xpath="genxml/docs/genxml[[2]]/textbox/txtfilename" testvalue="" display="{OFF}"  />]
	            <li><i class='fa fa-file-text fa-2x'></i>[<tag type="label" resourcekey="ProductView.filebullets" />]<span class="documentname">[<tag type="productdoctitle" index="2" />]</span><span class="documentdescription">[<tag type="productdocdesc" index="2" />]</span>
	            [<tag cssclass="documentlink classicbutton" resourcekey="ProductView.download" type="productdoclink" index="2" />]
	            </li>
	            [<tag type="endif" />]

	            [<tag type="if" xpath="genxml/docs/genxml[[3]]/textbox/txtfilename" testvalue="" display="{OFF}"  />]
	            <li><i class='fa fa-file-text fa-2x'></i>[<tag type="label" resourcekey="ProductView.filebullets" />]<span class="documentname">[<tag type="productdoctitle" index="3" />]</span><span class="documentdescription">[<tag type="productdocdesc" index="3" />]</span>
	            [<tag cssclass="documentlink classicbutton" resourcekey="ProductView.download" type="productdoclink" index="3" />]
	            </li>
	            [<tag type="endif" />]
            </ul>
        </div>
        [<tag type="endif" />]

</div>
<!-- End Details -->

<!-- Related Items -->
[<tag type="if" function="hasrelateditems" display="{ON}" />]
<h3>[<tag type="valueof" resourcekey="ProductView.related" />]</h3>
<div id="relatedwrapper" class="productlist">
[<tag type="relatedproducts" template="relatedlist.html" />]
</div>
[<tag type="endif"  />]

</div>